---
title: "Card"
description: A flexible UI container that groups related content, actions, and media in a structured and visually appealing layout.
published: true
order: 1
---
## Basic
Top spots to hit in 2025, no cap!
<How toUse="surfaces/card/card-demo"/>

## Installation
```bash
npx shadcn@latest add @intentui/card
```

## Manual installation
```bash
npm i tailwind-merge
```
<SourceCode toShow='card'/>

## Anatomy
```
import {
  Card,
  CardAction,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
```

```
<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Card Description</CardDescription>
    <CardAction>Card Action</CardAction>
  </CardHeader>
  <CardContent>Card Content</CardContent>
  <CardFooter>Card Footer Button</CardFooter>
</Card>
```

## With form
Sometimes, you may need a card with a form inside.
<How toUse="surfaces/card/card-login-form-demo"/>

## Action
You can add actions to your card, which will be aligned to the right. This example demonstrates using the menu component, but you can use any component you prefer.
<How toUse="surfaces/card/card-action-demo"/>

## With table
When you place a table inside a card, The table gutter inherits the padding from its parent card to ensure visual consistency.
<How isCenter={false} className="px-6" toUse="surfaces/card/card-table-demo"/>

For table docs, check out the [Table](/docs/components/collections/table) docs.

## Section title
Sometimes, you may only need a card header without wrapping container itself. Of course, you need don't want the default padding, right? So I have prop called `withoutPadding` to help you out.
```
<CardHeader
  title="List Daemons"
  description="List of daemons to use in your sites."
/>
```
